<template>
    <div class="aboutus">
      <div class="title">
        <el-divider content-position="center">个人简介</el-divider>
          <el-row>
            <el-col :span="20">
              <el-card class="box-card" style="margin-bottom: 20px; margin-top: 20px;">
              <el-descriptions :column="4" >
                <el-descriptions-item label="姓名" label-class-name="my-label" content-class-name="my-content">{{ studentResume.name }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{studentResume.phone}}</el-descriptions-item>
                <el-descriptions-item label="邮箱">{{studentResume.email}}</el-descriptions-item>
                <el-descriptions-item label="性别">{{studentResume.gender}}</el-descriptions-item>
                <el-descriptions-item label="籍贯" :contentStyle="{'text-align': 'right'}">{{ studentResume.address }}</el-descriptions-item>
                <el-descriptions-item label="毕业院校">
                  <span class="large">{{studentResume.graduation}}</span>
                </el-descriptions-item>
                <el-descriptions-item label="专业" >{{ studentResume.major }}</el-descriptions-item>
                <el-descriptions-item label="毕业时间" >{{ studentResume.graduationDate }}</el-descriptions-item>
                <el-descriptions-item label="意向工作" >{{ studentResume.jobIntention }}</el-descriptions-item>
                <el-descriptions-item label="意向工作地点" >{{ studentResume.addressIntention }}</el-descriptions-item>
                <el-descriptions-item label="当前状态">
                  <el-tag size="small">{{studentResume.status}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="爱好">
                  <el-tag size="small">{{studentResume.hobby}}</el-tag>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            </el-col>

            <el-col :span="3" style="margin-top: 20px;">
              <el-image
                style="width: 150px; height: 200px"
                :src="studentResume.href"
                :fit="'fill'"
                >
                <div slot="error" class="image-slot">
               <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>

            </el-col>
          </el-row>

      </div>
      <el-card class="box-card" style="margin-bottom: 20px;">
        <div class="text item">
          <el-row :gutter="110">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                {{ studentResume.selfIntroduction1 }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                  {{ studentResume.selfIntroduction2 }}
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                  {{ studentResume.selfIntroduction3}}
              </div>
            </el-col>
          </el-row>
        </div>
        <div class='topMask square'></div><div class='topMask circular'></div>
      </el-card>
    </div>
  </template>
<script>
export default {
  name: 'AboutUs',
  props: {
    studentResume: {
      type: Object
    }
  }
}
</script>
  <style>
    .aboutus .grid-content.line{
      border-right: 1px solid #ddd;
      height: 150px;
    }
    .aboutus .el-card__header{
      background: #545c64;
    }
    .aboutus .el-card__body{
      padding: 50px 20px;
    }
    .aboutus .el-timeline-item__wrapper{
      top: -8px;
    }
    .aboutus .title p .el-tag{
      margin: 0px 5px;
      cursor: pointer;
    }
  </style>
  <style scoped>
    .aboutus{
      font-size: 14px;
      text-align: left;
      padding: 0px 100px;
    }
    .intro{
      width: 200px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .text {
      font-size: 14px;
      text-align: left;
      line-height: 30px;
      text-indent: 2em;
    }
    .box-card{
      position: relative;
    }
    .item {
      display: inline-block;
      margin: 30px 50px;
    }
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
    .clearfix span{
      color: #fff;
      font-weight: bold;
    }
    .title p{
      color: #8c8888;
      font-size: 15px;
      margin-bottom: 80px;
      text-align: center;
    }
    .title>.el-divider--horizontal{
      margin-top:50px
    }
     .large{
      font-size: 16px;
      color: #409EFF;
      font-weight: bold;
    }
    .topMask{
      width: 100px;
      height: 100px;
      background-color: rgba(68,138,255,0.2);
      transform: rotate(45deg);
      position: absolute;
    }
    .square{
      border-radius: 5px;
      top: 0px;
    }
    .circular{
      border-radius: 50%;
      top:80px;
      left: 80%;
      background-color: rgba(255, 208, 75,0.2);
    }
  </style>
